{include file="public/header"/}

<style>
    a {
        cursor: pointer;
    }
    a:hover {
        color: rgb(59, 180, 242);
        text-decoration:none;
    }

    .my-setting {
        margin: 10px auto;
        background: #fff;
        border-radius: 8px;
        width: 98%;
        border:1px solid #ddd;
    }
    .my-setting .head {
        height: 40px;
        line-height: 40px;
        background: #ddd;
        display: flex;
        justify-content: space-between;
    }
    .my-setting .head .title {
        padding: 0px 15px;
    }
    .my-setting .head .action {
        padding: 0px 15px;
    }
    .my-setting > .list {
        height: 80px;
        display: flex;
        flex-direction: row;
    }
    .my-setting .layui-table {
        margin: 0px 0px;
    }
    .my-setting > .list > li {
        width: 20%;
        text-align: center;
        margin: 10px 0px;
    }
    .my-setting > .list > li > p {
        height: 30px;
        line-height: 30px;
    }
    .my-setting > .list > li > .name {
        font-size: 15px;
        font-weight: bold;
    }
    .my-setting > .list > li > .meta {
        font-size: 14px;
        color: rgb(180, 180, 180);
    }
    .my-setting > .list > li > .meta > select {
        font-size: 14px;
        color: #000000;
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
    .my-setting > .list > li > .name > .layui-form-switch {
        margin-top: 0px;
        margin: 0px 3px;
    }
    .my-setting > .list > li:not(:last-child) {
        border-right: 1px solid #ddd;
    }

</style>
<div id="container">
    <div class="my-setting">
        <div class="head">
            <div class="title">
                我的设置
            </div>
        </div>
        <div class="list">
            <li class="item layui-form">
                <p class="name">视频通话</p>
                <p class="meta">
                	{if $video == 'open'}
                	<input type="checkbox" lay-skin="switch" lay-filter="video" checked lay-text="开启|关闭">
                	{else}
                	<input type="checkbox" lay-skin="switch" lay-filter="video" lay-text="开启|关闭">
                	{/if}
                </p>
            </li>
            <li class="item layui-form">
                <p class="name">音频通话</p>
                 <p class="meta">
                 	{if $audio == 'open'}
                    <input type="checkbox" lay-skin="switch" lay-filter="audio" checked lay-text="开启|关闭">
                 	{else}
                	<input type="checkbox" lay-skin="switch" lay-filter="audio" lay-text="开启|关闭">
                	{/if}
                </p>
               
            </li>
            <li class="item layui-form">
                <p class="name">消息提示音</p>

                 <p class="meta">
                 	{if $voice == 'open'}
                    <input type="checkbox" lay-skin="switch" checked lay-filter="voice" lay-text="开启|关闭">
                 	{else}
                	<input type="checkbox" lay-skin="switch"  lay-filter="voice" lay-text="开启|关闭">
                    {/if}
                </p>
               
            </li>
            <li class="item layui-form">
                <p class="name">智能分配</p>
                 <p class="meta">
                 	{if $method == 'auto'}
                    <input type="checkbox" lay-skin="switch" lay-filter="method" checked lay-text="开启|关闭">
                 	{else}
                	<input type="checkbox" lay-skin="switch" lay-filter="method" lay-text="开启|关闭">
                    {/if}
                </p>

            </li>
            <li class="item layui-form">
                <p class="name">提示音 <a href="javascript: playVoice();"><i class='am-icon-play-circle'></i></a>
                    <audio src="/upload/voice/default.mp3" controls="controls" hidden="true" id="voice_url"></audio>
                </p>
                <p class="meta">
                    <a href="javascript:readyUpload();" class='layui-btn layui-btn-normal' style="height: 25px;line-height: 25px;">上传</a>
                </p>
                <div style="display: none;">
                    <form id="voiceform" class="am-form am-form-xs" style="position: absolute;right: 80px;" method="post">
                        <div class="am-form-group am-form-file">
                            <div style="height: 100%">
                                <input type="file" name="voice" id="voice"  onchange='uploadVoice()' multiple>
                            </div>
                        </div>
                    </form>
                </div>
            </li>
        </div>
    </div>
</div>

<script>
 
 var playVoice =function(){
     $('#voice_url')[0].play();
 }

 var readyUpload=function(){
 	$("#voice").click();
 }

 var uploadVoice=function(){

 	 $("#voiceform").ajaxSubmit({
            url: '{:url("admin/manager/uploadvoice")}',
            type: "post",
            dataType:'json',
            success: function (res) {
                   if(res.code == 0){
                      layer.msg(res.msg,{icon:1});
                   }else{
                     layer.msg(res.msg,{icon:2});
                   }

            }
        });

 }
 
 var getswitchmethod =function(res){
       $.ajax({
        url:'/admin/set/getswitchmodel',
        type:'post',
        dataType:'json',
        data:{type:res},
        success:function(res){
           if(res.code == 0){
                    layer.msg(res.data,{icon:1,end:function(){
                        location.reload();
                    }});
                }else{
                    layer.msg(res.data,{icon:2,end:function(){
                        location.reload();
                    }});
                }
        }
       });
 } 

 var changeMethod=function(data){

 
         var checkStatus = data.elem.checked;
         if(checkStatus){
            //智能
            getswitchmethod('auto');
         }else{
            //认领
            getswitchmethod('claim');
         }
    
 	

 }

 var getvideoswitch =function(res){

        $.ajax({
            url:'/admin/set/videoswitch',
            type:'post',
            dataType:'json',
            data:{type:res},
            success:function(res){
                if(res.code == 0){
                    layer.msg(res.data,{icon:1,end:function(){
                        location.reload();
                    }});
                }else{
                    layer.msg(res.data,{icon:2,end:function(){
                        location.reload();
                    }});
                }
            }
        })
    }

 var changeVideo=function(data){

 	 var checkStatus = data.elem.checked;
     if(checkStatus){
     	// open
        getvideoswitch('open');
     }else{
     	//close
        getvideoswitch('close');
     }

 }


 var getaudioswitch=function(res){

        $.ajax({
            url:'/admin/set/audioswitch',
            type:'post',
            dataType:'json',
            data:{type:res},
            success:function(res){
                if(res.code == 0){
                    layer.msg(res.data,{icon:1,end:function(){
                        location.reload();
                    }});
                }else{
                    layer.msg(res.data,{icon:2,end:function(){
                        location.reload();
                    }});
                }
            }
        });
  }

 var changeAudio=function(data){

     var checkStatus = data.elem.checked;
     if(checkStatus){
     	// open
        getaudioswitch('open');
     }else{
     	//close
        getaudioswitch('close');
     }
 }


 var getswitchvoice =function(res){

           $.ajax({
            url:'/admin/set/voiceswitch',
            type:'post',
            dataType:'json',
            data:{type:res},
            success:function(res){
                if(res.code == 0){
                    layer.msg(res.data,{icon:1,end:function(){
                        location.reload();
                    }});
                }else{
                    layer.msg(res.data,{icon:2,end:function(){
                        location.reload();
                    }});
                }
            }
        })

    }


 var changeVoice=function(data){

 	 var checkStatus = data.elem.checked;
     if(checkStatus){
     	// open
        getswitchvoice('open');
     }else{
     	//close
        getswitchvoice('close');
     }
 }

 layui.use('form', function(){
  var form = layui.form;
  form.on('switch(method)',changeMethod);
  form.on('switch(video)',changeVideo);
  form.on('switch(audio)',changeAudio);
  form.on('switch(voice)',changeVoice);
});


</script>
{include file="public/footer"/}
